<template>
    <div class="table-container" ref="tableContainer">
        <fun-btn
            :column-date="columnDate"
            :common-placeholder="commonPlaceholder"
            :button-list = "buttonList"
            :has-common-filter = "hasCommonFilter"
            @onRowButtonClick="onRowButtonClick"/>
        <el-table
            v-loading="listLoading"
            v-tableLoadmore="loadMore"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            :height="tableHeight"
            @current-change="handleCurrentChange"
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange"
            highlight-current-row>
            <el-table-column type="selection" width="55" align="center"/>>
            <el-table-column align="center" label="ID" width="95" sortable>
                <template slot-scope="scope">
                    {{ scope.$index }}
                </template>
            </el-table-column>
            <template v-for="(item, index) in showRowColumn">
                <el-table-column
                    :fixed="index < fixedColumns"
                    :key="index"
                    v-if="fieldValid[item.relcolumnId] === '1'"
                    :width="width"
                    :align="align"
                    sortable="custom"
                    :prop="item.columnId"
                    :label="$t(item.columnName)">
                    <template slot-scope="scope">
                        <span>{{ scope.row[item.columnId] }}</span>
                    </template>
                </el-table-column>
            </template>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container" style="margin-top: 10px;">
            <slot/>
        </div>
    </div>
</template>

<script>
import funBtn from '@/components/table/funBtn'
// import pagination from '@/mixins/pagination'

export default {
    components: { funBtn },
    // mixins: [pagination],
    props: {
        formId: String,
        commonPlaceholder: '',
        filterData: Object,
        showRowColumn: Array,
        list: Array,
        listLoading: true,
        fieldValid: Object,
        buttonValid: Object,
        buttonList: Array,
        hasCommonFilter: true,
        fixedColumns: {
            type: Number,
            default: 0
        },
        heightPercentage: {
            type: Number,
            default: 1
        },
        hasTab: {
            type: Boolean,
            default: false
        },
        masterTable: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            // 没有侧边为false
            align: 'center',
            width: 200,
            // 多选的数据
            multipleSelection: [],
            selectdata: [],
            columnDate: [],
            // 单选的数据
            currentRow: []
        }
    },
    computed: {
        tableHeight() {
            if (this.heightPercentage === 1 && !this.hasTab) {
                console.log('44444444')
                return window.innerHeight - 240
            } else if (this.heightPercentage === 1 && this.hasTab) {
                console.log('33333')
                return window.innerHeight - 290
            } else if (this.heightPercentage !== 1 && this.hasTab) {
                console.log('22222222')
                return (window.innerHeight - 135) * this.heightPercentage - (56 + 58 + 42)
            } else {
                console.log('11111111')
                return (window.innerHeight - 135) * this.heightPercentage - (58 + 42)
            }
        }
    },
    methods: {
        resize() {
            console.log('resize')
        },
        toggleSlider(val) {
            this.isOpen = !val
            this.defaultPercent = val ? 0 : 20
            console.log(this.defaultPercent)
            this.$refs.split.onSetPercent(this.defaultPercent)
        },
        handleSelectionChange(val) {
            console.log(val)
            this.multipleSelection = val
        },
        handleCurrentChange(val) {
            console.log(val)
            this.currentRow = []
            this.currentRow.push(val)
            if (val && this.masterTable) {
                this.$eventBus.$emit('zhubiaochuandi', val)
            }
        },
        // 检查是否只有一条数据
        checkSingleSelection() {
            console.log(this.multipleSelection.length)
            if (this.multipleSelection.length === 1) {
                return Promise.resolve(this.multipleSelection[0])
            } else {
                return Promise.reject()
            }
        },
        // 无限加载table数据
        loadMore() {
            console.log('到底了')
            this.$emit('loadMore')
        },
        onRowButtonClick(e) {
            console.log(e)
            e.list = this.multipleSelection.length > 0 ? this.multipleSelection : this.currentRow
            this.$emit('onRowButtonClick', e)
        },
        handleSortChange(e) {
            console.log(e)
            this.$emit('onSortClick', e)
        }
    }
}
</script>

